import router from './router'
import store from './store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { asyncRoutes } from './router'
NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  NProgress.start()
  if (store.getters.token) {
    // 如果家有token，则跳转到首页
    if (to.path === '/login') {
      NProgress.done()
      next('/')
    } else { // 如果有token,并且不是去登录页面,就放行
      if (!store.getters.userId) { // 判断是否获取过用户信息,如果没有就获取用户信息
        const res = await store.dispatch('user/setUserInfo') // 获取用户信息,拿到用户相关的权限信息
        // console.log(res)
        // console.log(res.roles.menus) // 获取到用户角色权限
        // console.log('动态路由', asyncRoutes) // 获取到所有的动态路由
        const newRoutes = asyncRoutes.filter(item => { // 过滤出用户角色权限和动态路由的name属性相同的路由
          return res.roles.menus.includes(item.name)
        })
        // console.log('筛选过的动态路由', newRoutes)
        // 将新路由添加到路由表中
        store.commit('user/setRouters', newRoutes)
        // console.log('路由表', store.getters.routers)
        // 将获取到的路由添加到路由表中 -正常访问
        // 但是path *兜底方案必须在路由表的最后位置,不然页面刷新是会被404页面拦截
        router.addRoutes([...newRoutes, { path: '*', redirect: '/404', hidden: true }])
        // v2版本中的router有一个已知缺陷,刷新会出现白屏的问题
        // 解决方案就是动态添加动态路由信息之后,必须转发一下 next(to.path),才能让路由重新拥有信息
        next(to.path)
      }
      next()
    }
  } else {
    // 如果没有token，则跳转到登录页
    if (whiteList.includes(to.path)) {
      next()
    } else {
      NProgress.done()
      next('/login')
    }
  }
})
// 如果被前置守卫拦截了,就不会进入到后置守卫中
// 就会导致进度条无法被关闭，
// 解决方案:手动关闭进度条
router.afterEach((to, from) => {
  // finish progress bar
  // console.log('路由后置守卫to', to)
  if (to.meta?.title) {
    document.title = `人力资源后台管理系统-${to.meta.title}`
  }
  NProgress.done()
})
